<template>
    <div class="entry">
        <div class="mid-width">
            <el-row>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/index' }">&nbsp;&nbsp;<i class="el-icon-house"></i>&nbsp;&nbsp;首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">{{this.$route.query.typeId | nameTit}}</a></el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>

            <el-row><h3>&nbsp;</h3></el-row>

            <el-row>
                <ul class="entry-new">
                    <li v-for="(item, index) in tableData" :key="index" v-if="index<=9">
                        <router-link tag="a" :to="{path:'/detail/',query:{'typeId':item.typeId, 'newsId':item.newsId}}" >
                            <span class="timeSet">{{item.createDate | formatDate}}</span>&nbsp;&nbsp;<i class="el-icon-arrow-right"></i>&nbsp;&nbsp;{{item.title | fontSize}}
                        </router-link>
                    </li>
                </ul>
            </el-row>
            <el-row>
                <el-pagination
                        @current-change="handleCurrentChange"
                        background
                        :current-page="curPage"
                        layout="prev, pager, next"
                        :total="pageTotal">
                </el-pagination>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {apiData} from '../interface/api';
    import {tool} from '../tool/index';
    export default {
        name: "entry",
        data(){
            return {
                tableData: [],
                pageTotal:null,
                curPage:1,
                pageSize:10,
                typeId:this.$route.query.typeId,
            }
        },
        methods:{
            async newList(method, url, obj){
                const res = await apiData.policyList(method, url, obj)
                if(res.data.code===200){
                    console.log(res)
                    this.tableData = res.data.list
                    this.pageTotal = res.data.totals
                }
            },
            handleCurrentChange(Page){
                this.curPage = Page;
                //console.log(this.curPage)  //点击第几页
                this.newList("post", `/web/newsList?pageNum=${this.curPage}&pageSize=${this.pageSize}`, {typeId:this.typeId})
            }
        },
        mounted() {
            this.newList("post", `/web/newsList?pageNum=${this.curPage}&pageSize=${this.pageSize}`, {typeId:this.typeId})
        },
        watch:{
            "$route"(val,old){
                if(old!==val){
                    this.typeId = val.query.typeId;
                    this.newList("post", `/web/newsList?pageNum=${this.curPage}&pageSize=${this.pageSize}`, {typeId:this.typeId})
                }

            }
        },
        filters:{
            formatDate(val) {
                const value=new Date(val);
                const year=value.getFullYear();
                const month= tool.padDate(value.getMonth()+1);
                const day = tool.padDate(value.getDate());
                const hour = tool.padDate(value.getHours());
                const minutes = tool.padDate(value.getMinutes());
                const seconds = tool.padDate(value.getSeconds());
                return `${year}-${month}-${day}`;
            },
            nameTit(id){
                let pageTit =1;
                switch (id){
                    case 1:
                        pageTit = "政策法规";
                            break;
                    case 2:
                        pageTit = "通知公告";
                        break;
                    case 3:
                        pageTit = "文件下载";
                        break;
                }
                return pageTit
            },
            fontSize(title){
                if(title.length>=50){
                    return `${title.slice(0, 45)}...`
                } else {
                    return title
                }
            },
        }
    }
</script>

<style lang="less" scoped>
    .entry{
        .mid-width{
            ul{
                &.entry-new{
                    border-radius: 5px;
                    border: 1px solid #eee;
                    padding: 30px;
                    height: 480px;
                    li{
                        line-height: 40px;
                        border-bottom: 1px dashed #eee;
                        span{
                            &.timeSet{
                                float: right;
                            }
                        }
                        a{
                            text-decoration: none;
                            color: black;
                            &:hover{
                                color: #009688;
                            }
                        }
                    }
                }
            }
            .el-pagination{
                margin-top: 20px;
            }
        }
    }
</style>